<template>
  <div class="algorithmComment">
    <h3>评论</h3>
    <div class="send">
      <el-input :rows="3" type="textarea" placeholder="" v-model="inputValue" />
      <el-button class="sendBtn" type="primary" @click="addComment"
        >发送</el-button
      >
    </div>
    <div>
      <!-- 一级评论 -->
      <div class="comment-content">
        <div v-for="(comment, index) in commentList" :key="index" class="level">
          <div class="conter">
            <span class="timeOne">{{ comment.userID }}</span>
            <span class="timeTwo">{{ comment.operTime }}</span>
            <el-button
              type="danger"
              plain
              size="small"
              @click="delAlsComment(comment)"
              class="buttonDel"
              v-show="comment.operType == 0 ? false : true"
              >删除</el-button
            >
            <el-button
              type="success"
              plain
              size="small"
              @click="replyComment(comment)"
              class="buttonDel"
              v-show="comment.operType == 1 ? false : true"
              >回复</el-button
            >
          </div>
          <div>
            {{ comment.message }}
          </div>
          <!-- 二级回复 -->
          <div
            class="reply"
            v-for="(it, index) in comment.children"
            :key="index"
          >
            <div>
              <span class="timeOne"
                >{{ it.userID }}回复{{ it.answerUser }}</span
              >
              <span class="timeTwo">{{ it.operTime }}</span>
              <el-button
                type="danger"
                plain
                size="small"
                @click="delAlsComment(it)"
                class="buttonDel"
                v-show="it.operType == 0 ? false : true"
                >删除</el-button
              >
              <el-button
                type="success"
                plain
                size="small"
                @click="replyComment(it)"
                class="buttonDel"
                v-show="it.operType == 1 ? false : true"
                >回复</el-button
              >
            </div>
            <div>
              {{ it.message }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
      v-model="replyVisible"
      title="回复"
      width="40%"
      :close-on-click-modal="false"
      style="--el-dialog-margin-top: 40vh"
    >
      <el-input v-model="replyInput" :rows="3" type="textarea" />
      <el-row class="row-button">
        <el-button type="primary" plain @click="replyVisible = false"
          >关闭</el-button
        >
        <el-button type="primary" plain @click="replyto">发送</el-button>
      </el-row>
    </el-dialog>
    <!-- 分页 -->

    <div class="page">
      <el-pagination
        background
        v-model:current-page="pageLimit.pageIndex"
        v-model:page-size="pageLimit.pageRow"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageLimit.totalCount"
      />
    </div>
  </div>
</template>

<script setup>
import {
  readAlsComment,
  sendAlsComment,
  deleteAlsComment,
} from "@/services/algorithm";
import { onMounted, reactive, toRefs, ref, inject, provide, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const inputValue = ref(""); //输入的内容
const data = reactive({
  commentList: [], // 评论列表
  pageLimit: {
    // 评论列表分页
    pageIndex: 1,
    pageRow: 10,
    totalCount: 0,
  },
});
const { alsId } = defineProps({
  alsId: String,
});

const alsObj = inject("als"); //接受父组件的数据
const replyVisible = ref(false); //回复弹框
const replyInput = ref(""); //弹框回复输入内容
const replyList = ref({}); //接受传递的内容
const { commentList, pageLimit } = toRefs(data); //以结构对象输出
//获取分页数据 获取数据
const queryAlgorithmComments = async (id, pageLimit) => {
  const res = await readAlsComment({ alsID: id, pageLimit });
  if (res?.respCode == 200) {
    commentList.value = res.respData.messageList;
    data.pageLimit = res.respData.pageLimit;
  }
};
const dialogVisible = inject("dialogVisible"); //接父组件的弹框状态
//根据传递的弹框的状态来调用
watch(
  //监听数据回显
  () => dialogVisible.value,
  (n, o) => {
    if (n) {
      queryAlgorithmComments(alsId, pageLimit.value);
    }
  }
);
//添加评论
const addComment = async () => {
  if (inputValue.value == "") {
    ElMessage.success("内容不能为空");
    return;
  }
  let respData = await sendAlsComment({
    alsID: alsId,
    rootID: "",
    answerID: "",
    message: inputValue.value,
  });
  if (respData?.respCode == 200) {
    inputValue.value = "";
    queryAlgorithmComments(alsId, pageLimit.value);
    alsObj.commented++;
  } else {
    ElMessage.error("添加评论失败");
  }
};

// 删除评论
const delAlsComment = (operdel) => {
  ElMessageBox.confirm("是否要删除评论", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const respData = await deleteAlsComment({
        alsID: alsId,
        rootID: operdel.rootID, //根节点id就是null
        messageID: operdel.unqID,
      });
      if (respData?.respCode == 200) {
        ElMessage({
          message: respData.respMessage,
          type: "success",
        });
        alsObj.commented--; //评论--
        queryAlgorithmComments(alsId, pageLimit.value);
      }
    })
    .catch(() => {});
};
//回复
const replyComment = (opercontent) => {
  replyVisible.value = true; //打开弹框
  replyInput.value = ""; //内容置空
  replyList.value = opercontent; //赋值 点击发送回复时传值
};

//发送回复
const replyto = async () => {
  if (replyInput.value == "") {
    ElMessage.success("内容不能为空");
    return;
  } //获取发送数据
  let respData = await sendAlsComment({
    alsID: alsId,
    rootID: replyList.value.rootID,
    answerID: replyList.value.unqID,
    message: replyInput.value,
  });
  if (respData?.respCode == 200) {
    replyVisible.value = false;
    queryAlgorithmComments(alsId, pageLimit.value);
  }
};
//调用
onMounted(() => {
  queryAlgorithmComments(alsId, pageLimit.value);
});
</script>

<style lang="scss" scoped>
.algorithmComment {
  // height: 300px;
  .send {
    // padding-bottom: 25px;
    margin: 10px 10px;
    box-sizing: border-box;
    .sendBtn {
      float: right;
      margin-top: 5px;
    }
  }
  .timeOne {
    font-size: 18px;
    color: #333;
  }
  .timeTwo {
    // float: right;
    margin-left: 10px;
    color: #ababab;
    font-size: 12px;
  }
  .page {
    display: flex;
    justify-content: center;
  }
  .comment-content {
    width: 100%;
    // height: 240px;
    overflow: auto;
    padding: 12px 10px;
    box-sizing: border-box;
  }
  .buttonDel {
    float: right;
    margin-right: 10px;
  }
}
.row-button {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.level {
  margin-bottom: 10px;
}
.reply {
  margin-left: 20px;
  margin-top: 10px;
  box-sizing: border-box;
}
</style>